<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>用户管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">

		<link rel="stylesheet" type="text/css" href="/static/manage/common/bootstrap/js/bootstarp-3.3.7/css/bootstrap.min.css" />
		<script src="/static/manage/common/bootstrap/js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/bootstarp-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="/static/manage/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table.min.css" />
		<script src="/static/manage/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			//添加方法
			function add () {
				$("#myModal").modal("show")
			}
			
			//转换日期格式(时间戳转换为datetime格式)
			function changeDateFormat(cellval) {
				var dateVal = cellval + "";
				if(cellval != null) {
					var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
					var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
					var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

					var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
					var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
					var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

					return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
				}
			}



			$(function() {

						//alert("json");

				//1.初始化Table

				var oTable = new TableInit();

				oTable.Init();

				var message = document.getElementById("message").value;

				if(message != null && message != "") {

					alert(message);

				}

			});

			var TableInit = function() {
				var oTableInit = new Object();
				//初始化Table
				oTableInit.Init = function() {

					$('#t').bootstrapTable({

						method: 'get',

						contentType: "application/x-www-form-urlencoded",

						url: "/sys/findUser", //请求后台的URL（*）

						striped: true, //是否显示行间隔色

						locale: 'zh-CN', //中文支持

						pagination: true, //是否开启分页（*）

						pageNumber: 1, //初始化加载第一页，默认第一页

						pageSize: 5, //每页的记录行数（*）

						pageList: [5, 7, 9], //可供选择的每页的行数（*）

						sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）

						//showRefresh: true, //刷新按钮

						queryParams: oTableInit.queryParams, //传递参数（*）

						strictSearch: true,

						//showColumns: true, //是否显示所有的列

						minimumCountColumns: 2, //最少允许的列数

						clickToSelect: true, //是否启用点击选中行

						columns: [{
							title: '<input type="checkbox" id="all" onclick="checkAll()"/>',
							align: 'center',
							width:'40',
							formatter: function (value, row, index) {
							    return '<input name="che" type="checkbox" value="'+row.user_id+'"/>'
							}
						},{
								title: '',
								align: 'center',
								width:'40',
								formatter: function (value, row, index) {
								    //获取每页显示的数量
								    var pageSize=$('#t').bootstrapTable('getOptions').pageSize;  
								    //获取当前是第几页  
								    var pageNumber=$('#t').bootstrapTable('getOptions').pageNumber;
								    //返回序号，注意index是从0开始的，所以要加上1
								    return pageSize * (pageNumber - 1) + index + 1;
								}
							},{
								field: 'account',
								title: '用户账号',
								align: 'center'
							},
							{
								field: 'username',
								title: '用户名',
								align: 'center'
							},
							{
								field: 'sysDept.dept_name',
								title: '所属机构',
								align: 'center'
							}, {
								field: 'user_Role.sys_Role.role_name',
								title: '所属角色',
								align: 'center'
							}, {
								field: 'sex',
								title: '性别',
								align: 'center',
								formatter: function(v, r, i) {

									switch(Number(v)) {

										case 1:

											return "男";

											break;

										case 2:

											return "女";

											break;

										default:

											return "未知";

											break;

									}

								}
							}, {
								field: 'mobile',
								title: '手机号码',
								align: 'center'
							}, {
								field: 'email',
								title: '邮箱',
								align: 'center'
							}, {
								field: 'style',
								title: '界面风格',
								align: 'center'
							}, {
								field: 'status',
								title: '用户状态',
								align: 'center',
								formatter: function(v, r, i) {
									switch(Number(v)) {
										case 1:
											return "正常";
											break;
										case 2:
											return "停用";
											break;
										default:
											return "锁定";
											break;
									}
								}
							}, {
								field: 'create_time',
								title: '创建时间',
								align: 'center',
								formatter: function(value, row, index) {
									return changeDateFormat(value)
								}
							}
						]

					});

				};

				//得到查询的参数

				oTableInit.queryParams = function(params) {

					var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的

						limit: params.limit, //页面大小

						offset: params.offset, //偏移量
						pageSize:params.limit,

						docNo: $("#PROTOCOL_CODE").val(),
						
						account: $("#account").val(),
						mobile: $("#mobile").val(),
						username: $("#username").val(),
						email: $("#email").val(),
						sex: $("#sex").val(),
						status: $("#status").val(),
						startTime: $("#startTime").val(),
						endTime: $("#endTime").val(),

						startTime: $("#startTime").val(),

						endTime: $("#endTime").val(),

						brand: $("#PROTOCOL_STATUS").val(),

						important: $("#PROTOCOL_TYPE").val()
					};
					return temp;
				};
				return oTableInit;
			};
			
			
			function chaxun () {
				//alert($("#dept_name").val())
				$("#t").bootstrapTable('refresh');
			}
			
			
			$(function () {
				//部门下拉框
				$.ajax({
					type: "post",
					url: "/sys/findDeptsName",
					dataType: "json",
					success: function(depts) {
						$.each(depts, function(index, depts) {
							$("#d").append("<option value='" + depts.dept_id + "'>" + depts.dept_name + "</option>")
							$("#d1").append("<option value='" + depts.dept_id + "'>" + depts.dept_name + "</option>")
						});
					}
				});
			})
			
			
			
			function addUser(){
				 $.ajax({
					type: "post",
					url: "/sys/addUser",
					data:$('#fm').serialize(),
					success: function(data) {
						if (data!=0) {
							alert("添加成功！！")
							$("#myModal").modal("hide");
							location.reload()
							$("#t").bootstrapTable('refresh');
						}else{
							alert("添加失败！！")
						}
						
					} 
				});
				
			}
			
			function checkAll () {
				var allche = document.getElementById("all");
				var ches = document.getElementsByName("che");
				for (i = 0; i < ches.length; i++) {
					ches[i].checked = allche.checked;
				}
			}
			
			function findIds(ename) {
				arr = document.getElementsByName(ename);
				ids = [];
				for (k in arr) {
					if (arr[k].checked)
						ids.push(arr[k].value);
				}
				return ids;
			}
			//删除
			function del () {
				if (findIds("che").length!=0) {
					$.ajax({
						type:"get",
						url:"/sys/delUsers?user_id="+findIds("che"),
						async:true,
						success:function (data) {
							if (data!=0) {
								alert("删除成功！！！")
								$("#t").bootstrapTable('refresh');
							} else{
								alert("删除失败！！！")
							}
						}
					});
					
				} else {
					alert("亲，请先选择你要删除的数据！！！")
				}				
			}
			
			
			//修改按钮
			function upd() {
				
				if (findIds("che").length!=0) {
						$.ajax({
						type:"post",
						url:"/sys/findUserById?user_id="+findIds("che"),
						async:true,
						success:function (data) {
							
							$("#myModal1").modal("show");
							$("#user_id1").val(data.user_id);
							$("#account1").val(data.account);
							$("#password1").val(data.password);
							$("#username1").val(data.username);
							$("#d1").val(data.dept_id);
							$("#sex1").val(data.sex);
							$("#mobile1").val(data.mobile);
							$("#email1").val(data.email);
							$("#qq1").val(data.qq);
							$("#wechat1").val(data.wechat);
							$("#idno1").val(data.idno);
							$("#address1").val(data.address);
							$("#status1").val(data.status);
							$("#lock_num1").val(data.lock_num);
							$("#remark").val(data.remark);
						}
					});
				} else{
					alert("你未选择要修改的数据！！！")
				}
				
			}
			
			//修改
			function updDept () {
				alert(1)
				$.ajax({
					type:"post",
					url:"/sys/updUser",
					data:$("#updForm").serialize(),
					success:function (msg) {
						if (msg!=0) {
							alert("修改成功！！")
							$("#myModal1").modal("hide")
							$("#t").bootstrapTable('refresh')
						} else{
							alert("修改失败！！")
						}
					}
				});
			}
		</script>
	</head>

	<body>
		<!--系统管理--用户管理界面模糊查询-->
		<form class="form-inline">
			<div class="form-group">
				<label for="account" class="control-label">用户账号：</label>
				<input type="text" class="form-control" id="account" placeholder="请输入用户账号">
			</div>

			<div class="form-group">
				<label for="username">用户姓名：</label>
				<input type="email" class="form-control" id="username" placeholder="请输入用户姓名">
			</div>

			<!--下拉框-->
			<div class="form-group">
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label for="sex">性别：</label>
				<select class="form-control" id="sex" name="sex">
					<option value=""></option>
					<option value="1">男</option>
					<option value="2">女</option>
					<option value="3">保密</option>
				</select>
			</div>

			<!--下拉框-->
			<div class="form-group">
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label for="status">用户状态：</label>
				<select class="form-control" id="status" name="status">
					<option value="0"></option>
					<option value="1">正常</option>
					<option value="2">停用</option>
					<option value="3">锁定</option>
				</select>
			</div><br />

			<div class="form-group">
				<label for="Phone">手机号码：</label>
				<input type="text" class="form-control" id="mobile" name="mobile" placeholder="请输入手机号码">
			</div>

			<div class="form-group">
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label for="Email">邮箱：</label>
				<input type="email" class="form-control" id="email" name="email" placeholder="请输入用户邮箱">
			</div>

			<div class="form-group">
				<label for="createtime">创建时间：</label>
				<input type="date" class="form-control" id="startTime">
				<label>至</label>
				<input type="date" class="form-control" id="endTime">
			</div>

			<button type="button" class="btn btn-success" onclick="chaxun()"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询</button>
		<button type="reset" class="btn btn-primary"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>重置</button>
		</form>
		<br><br>
		<table id="t">
			<div class="inline">
				<button id="add" onclick="add()" type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus" aria-hidden="true" style="color: green;"></span>新增</button>
				<button id="upd" onclick="upd()" type="button" class="btn btn-default"><span class="glyphicon glyphicon-pencil" aria-hidden="true" style="color: green;"></span>修改</button>
				<button id="res" onclick="res()" type="button" class="btn btn-info">密码重置</button>
				<button id="rem" onclick="rem()" type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true" style="color: green;"></span>移动用户</button>
				<button id="del" onclick="del()" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</button>
			</div>

		</table>
		
		<!--添加的模态框-->
		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document" style="width: 1000px; height: 1500px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">新增用户</h4>
					</div>
					<div class="modal-body">
						
						<!--添加form表单-->
						<form id="fm">
							<div class="modal-body">
								<div class="form-group"><!--用户账号-->
									<label for="account" class="col-sm-3 control-label">用户账号:</label>
									<div class="col-sm-3">
										<input type="text" class="form-control" name="account" placeholder="Account">
									</div>
									<label for="username" class="col-sm-3 control-label">用户姓名:</label>
									<div class="col-sm-3">
										<input type="text" class="form-control" name="username" placeholder="请输入用户姓名">
									</div>
								</div>
							</div>
							
							<div class="modal-body">
								<div class="form-group">
									<label for="password" class="col-sm-3 control-label">用户密码：</label><!--用户密码-->
									<div class="col-sm-3">
										<input type="password" class="form-control" name="password" placeholder="Password">
									</div>
									<label for="password2" class="col-sm-3 control-label">确认密码：</label><!--确认密码-->
									<div class="col-sm-3">
										<input type="password" class="form-control" name="password2" placeholder="Password2">
									</div>
								</div>
							</div>
							
							<div class="modal-body">
								<div class="form-group">
									<label for="lock_num" class="col-sm-3 control-label">锁定次数:</label>
									<div class="col-sm-3">
										<input type="number" class="form-control" name="lock_num" value="0" placeholder="Lock_num">
									</div>
									<label for="sex" class="col-sm-3 control-label">性别：</label>
									<div class="col-sm-3">
										<select class="form-control" name="sex1">
											<option value="0">-- --</option>
											<option value="1">男</option>
											<option value="2">女</option>
											<option value="3">保密</option>
										</select>
									</div>
								</div>
							</div>
							
							
							<div class="modal-body">
								<div class="form-group">
									<label for="status" class="col-sm-3 control-label">用户状态:</label>
									<div class="col-sm-3">
										<select class="form-control" name="status1">
											<option value="0">-- --</option>
											<option value="1">正常</option>
											<option value="2">停用</option>
											<option value="3">锁定</option>
										</select>
									</div>
									<label for="sex" class="col-sm-3 control-label">联系地址：</label>
									<div class="col-sm-3">
										<input type="text" class="form-control" name="address" placeholder="address">
									</div>
								</div>
							</div>
							
							<div class="modal-body">
								<div class="form-group">
									<label for="dept_id" class="col-sm-3 control-label">所属机构：</label>
									<div class="col-sm-3">
										<select class="form-control" id="d" name="dept_id">	
										</select>
									</div>
									<label for="mobile" class="col-sm-3 control-label">手机号码：</label>
									<div class="col-sm-3">
										<input type="text" class="form-control" name="mobile" placeholder="Mobile">
									</div>
								</div>
							</div>
														
							<div class="modal-body">
								<div class="form-group">
									<label for="QQ" class="col-sm-3 control-label">QQ:</label>
									<div class="col-sm-3">
										<input type="text" class="form-control" name="qq" placeholder="请输入QQ">
									</div>
									<label for="Wechat" class="col-sm-3 control-label">微信：</label>
									<div class="col-sm-3">
										<input type="text" class="form-control" name="wechat" placeholder="Wachat">
									</div>
								</div>
							</div>
							
							<div class="modal-body">
								<div class="form-group">
									<label for="email" class="col-sm-3 control-label">邮箱:</label>
									<div class="col-sm-3">
										<input type="text" class="form-control" name="email" placeholder="Email">
									</div>
									<label for="idno" class="col-sm-3 control-label">证件号：</label>
									<div class="col-sm-3">
										<input type="text" class="form-control" name="idno" placeholder="Idno">
									</div>	
								</div>
							</div>
							
							<div class="modal-body">
								<div class="form-group">
									<label for="remark" class="col-sm-3 control-label">备注:</label>
									<div class="col-sm-7">
										<textarea class="form-control" name="remark" rows="2"></textarea>
									</div>
								</div>
							</div>
						</form>
						
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" onclick="addUser()">添加</button>
					</div>
				</div>
			</div>
		</div>
		
		
		
		<!--修改的模态框-->
		<!-- Modal -->
		<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document" style="width: 1000px; height: 1500px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">修改用户</h4>
					</div>
					<div class="modal-body">
						 
						<!--修改form表单-->
						<form id="updForm">
							<input type="hidden" id="user_id1" name="user_id" />
							<div class="modal-body">
								<div class="form-group">
									<label for="account" class="col-sm-3 control-label">用户账号:</label>
									<div class="col-sm-3">
										<input type="text" class="form-control" id="account1" name="account" placeholder="">
									</div>
									<label for="username" class="col-sm-3 control-label">用户名:</label>
									<div class="col-sm-3">
										<input type="text" class="form-control" id="username1" name="username" placeholder="">
									</div>
								</div>
							</div>
							
							<div>
									<input type="hidden" class="form-control"  id="password1" name="password">
									</div>
							
							<div class="modal-body">
								<div class="form-group">
									<label for="dept_id" class="col-sm-3 control-label">所属机构:</label>
									<div class="col-sm-3">
										<select class="form-control" id="d1" name="dept_id">	
										</select>
									</div>
									<label for="sex" class="col-sm-3 control-label">性别：</label>
									<div class="col-sm-3">
										<select class="form-control" id="sex1" name="sex">
											<option value="0">-- --</option>
											<option value="1">男</option>
											<option value="2">女</option>
											<option value="3">保密</option>
										</select>
									</div>
								</div>
							</div>
							
							<div class="modal-body">
								<div class="form-group">
									<label for="mobile" class="col-sm-3 control-label">手机:</label>
									<div class="col-sm-3">
										<input type="text" class="form-control" id="mobile1" name="mobile" placeholder="">
									</div>
									<label for="email" class="col-sm-3 control-label">邮箱：</label>
									<div class="col-sm-3">
										<input type="text" class="form-control" id="email1" name="email" placeholder="">
									</div>								
									</div>
							</div>
							
							<div class="modal-body">
								<div class="form-group">
									<label for="qq" class="col-sm-3 control-label">QQ:</label>
									<div class="col-sm-3">
										<input type="text" class="form-control" id="qq1" name="qq" placeholder="">
									</div>
									<label for="wechat" class="col-sm-3 control-label">微信:</label>
									<div class="col-sm-3">
										<input type="text" class="form-control" id="wechat1" name="wechat" placeholder="">
									</div>
								</div>
							</div>
												
							<div class="modal-body">
								<div class="form-group">
									<label for="idno" class="col-sm-3 control-label">证件号:</label>
									<div class="col-sm-3">
										<input type="text" class="form-control" id="idno1" name="idno" placeholder="">
									</div>
									<label for="address" class="col-sm-3 control-label">联系地址：</label>
									<div class="col-sm-3">
										<input type="text" class="form-control" id="address1" name="address" placeholder="">
									</div>
								</div>
							</div>
							
							<div class="modal-body">
								<div class="form-group">
									<label for="status" class="col-sm-3 control-label">用户状态:</label>
									<div class="col-sm-3">
										<select class="form-control" id="status1" name="status">
											<option value="0">-- --</option>
											<option value="1">正常</option>
											<option value="2">停用</option>
											<option value="3">锁定</option>
										</select>
									</div>
									<label for="lock_num" class="col-sm-3 control-label">锁定次数:</label>
									<div class="col-sm-3">
										<input type="number" class="form-control" id="lock_num1" name="lock_num" value="5" placeholder="">
									</div>
								</div>
							</div>
							
						
							
							<div class="modal-body">
								<div class="form-group">
									<label for="remark" class="col-sm-3 control-label">备注:</label>
									<div class="col-sm-7">
										<textarea class="form-control" id="remark1" name="remark" rows="2"></textarea>
									</div>
								</div>
							</div>
						</form>
						
					</div>
					<div>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" onclick="updDept()">保存</button>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>